<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Scrum table</title>


  <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
  <script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="development-bundle/ui/jquery.ui.mouse.js"></script>
  <script type="text/javascript" src="development-bundle/ui/jquery.ui.resizable.js"></script>
  <script type="text/javascript" src="development-bundle/ui/jquery.ui.draggable.js"></script>

  <script type="text/javascript" src="js/jWebSocket.js">  <!--//--></script>
  <script type="text/javascript" src="js/bristle.js"></script>

  <link type="text/css" href="css/le-frog/jquery-ui-1.8.12.custom.css" rel="stylesheet"/>
  <link type="text/css" href="style.css" rel="stylesheet"/>
  <script type="text/javascript">
    var connector = new Bristle.BaseConnector();

    connector.actions.requestChangePosition = connector.actions.define("moveWidget").addParams("id", "position").create();


    function requestChangePosition(ui) {
      connector.actions.requestChangePosition(ui.helper.context.id,
        {
          top : ui.position.top,
          left : ui.position.left
        }
      );
    }

    function requestChangeSize(ui) {
      connector.requestAction("resizeWidget", {
          id : ui.originalElement.context.id,
          position : {
            height : ui.size.height,
            width : ui.size.width
          }
        })
    }

    function connect() {
      connector.openConnection(
        {
          serverUrl : "ws://localhost:9790",
          developmentConsole : false,
          OnOpen : function() {
          }
        }
      );
    }


    $(document).ready(function() {
      connect();

      addResizeAndDragSupport(".note");


      EventHandler.add("widgetMoved", function(params) {
        setLeftTopPosition(params);
      });

      EventHandler.add("widgetResized", function(params) {
        setWidthHeightPosition(params);
      });

      EventHandler.add("widgetAdded", function(params) {
        var widget = params.widget;
        var id = widget.id;
        appendNewNote(id, widget.noteName);
        setWidthHeightPosition(widget);
        setLeftTopPosition(widget);
        addResizeAndDragSupport("#" + id);
      });

      EventHandler.add("widgetsList", function(params) {
        var widgets = params.widgets;

        for (var widgetIndex in widgets) {
          var widget = widgets[widgetIndex];
          appendNewNote(widget.id, widget.noteName);
          setLeftTopPosition(widget);
          setWidthHeightPosition(widget);
          addResizeAndDragSupport("#" + widget.id);
        }
      });

      $("#addNoteButton").click(function() {
        var noteName = $("#noteName").val();
        connector.requestAction("addWidget", {
            noteName : noteName
          });
      })
    });

    function addResizeAndDragSupport(elementSelector) {
      $(elementSelector).resizable({
//          ghost: true,
          alwaysRelative : true,
          stop: function(event, ui) {
            //do nothing for now
          },
          resize : function(event, ui) {
            requestChangeSize(ui);
          }
        });

      $(elementSelector).draggable({
          containment: "#outer",
          snap: true,
          alwaysRelative: true,
          handle: ".ui-widget-header",
          start: function(event, ui) {
            //do nothing for now
          },
          drag: function(event, ui) {
            requestChangePosition(ui);

          },
          stop: function(event, ui) {
            //do nothing for now
          }
        });

      $(elementSelector).css("position", "absolute");
    }

    function appendNewNote(id, noteName) {
      var newDiv = "<div id=\"" + id + "\" class=\"note draggable ui-widget-content\">\n  <h3 class=\"ui-widget-header\">" + noteName + "</h3>\n</div>\n";
      $("#outer").append(newDiv);
    }

    function setLeftTopPosition(params) {
      var leftPos = params.position.left;
      var topPos = params.position.top;
      $("#" + params.id).css("left", leftPos);
      $("#" + params.id).css("top", topPos);
    }
    function setWidthHeightPosition(params) {
      var height = params.position.height;
      var width = params.position.width;
      $("#" + params.id).css("height", height);
      $("#" + params.id).css("width", width);
    }


  </script>
</head>
<body>
<div style="border: solid 1px gray; width: 300px; margin-bottom: 10px; padding:  10px;">
  <div><label for="noteName"><span class="bold">Note name</span></label><input type="text" id="noteName"/></div>
  <div id="addNoteButton" class="fancyButton fancyButtonMediumSize">Add note</div>
  <div class="clear"></div>
</div>


<div id="outer" style="padding: 10px;">
  <!--
<div id="note-1" class="note draggable ui-widget-content">
  <h3 class="ui-widget-header">sample note four</h3>
</div>
<div id="note-2" class="note draggable ui-widget-content">
  <h3 class="ui-widget-header">sample note three</h3>

  &lt;!&ndash;<div class="noteHandler"></div>&ndash;&gt;
  </div>
  <div id="note-3" class="note draggable ui-widget-content">
    <h3 class="ui-widget-header">sample note two</h3>

    &lt;!&ndash;<div class="noteHandler"></div>&ndash;&gt;
  </div>
  <div id="note-4" class="note draggable ui-widget-content">
    <h3 class="ui-widget-header">sample note one</h3>
  </div>
-->


</div>


</body>
</html>